export const defaultSfcCode = `
<template>
  <div class="demo-component">
    <h2>{{ props.message }}</h2>
    <p>Count: {{ count }}</p>
    <b-button @click="increment">Increment</b-button>
    <b-button @click="sendEvent">Send Event</b-button>
    
    <!-- ECharts 示例 -->
    <div ref="chartEl" style="width: 100%; height: 300px;"></div>
    
    <!-- 使用外部工具示例 -->
    <p>Generated ID: {{ id }}</p>
    <p>Formatted date: {{ formattedDate }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import utils from 'utils'

const props = defineProps({
  message: String,
  initialCount: Number
})

const emit = defineEmits(['count-changed','event-from-component'])

const count = ref(props.initialCount || 0)
const chartEl = ref(null)
const id = utils.uuid()

const formattedDate = computed(() => utils.formatDate(new Date()))

function increment() {
  count.value++
   emit('count-changed', count.value)
}

function sendEvent() {
  emit('event-from-component', {
    type: 'custom-event',
    data: {
      count: count.value,
      timestamp: Date.now()
    }
  })
}

onMounted(() => {
  if (chartEl.value) {
    const chart = echarts.init(chartEl.value)
    chart.setOption({
      title: { text: '动态加载的ECharts图表' },
      tooltip: {},
      xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
      yAxis: {},
      series: [{ 
        name: '示例数据',
        type: 'bar',
        data: [5, 20, 36, 10, 10] 
      }]
    })
  }
})
</script>

<style scoped>
.demo-component {
  font-family: Arial, sans-serif;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 20px;
}

button {
  margin-right: 10px;
  padding: 5px 10px;
}
</style>
`
